<style scoped lang="scss">
    .header {
        cursor: pointer;
    }
    
    .actvitiForm {
        background: #f8f8f9;
        width: 450px;
        height: 250px;
        border: 1px solid #ddd;
        top: 30px;
    }
</style>
<template>
    <div v-show="visiable"
         class="dialogContainer"
         v-dialog-drag1
    >
        <div style="padding-left: 10px;padding-right: 10px;padding-bottom: 20px;position:absolute;right:0px;top:0px;z-index:999;"
             class="actvitiForm el-dialog1">
            <div class="header el-dialog__header1"
                 style="border-bottom: 1px solid #ddd;padding-bottom: 10px;padding-top: 10px;cursor: move;">
                <span v-if="isFold">编辑线条 {{title}}</span>
                <div style="position: absolute;right:10px;top:10px;cursor: pointer;">
                    <svgIcon :icon-class="'close'" @click.native="()=>{    visiable=false }"></svgIcon>
                </div>
            </div>
            <section style="margin-top: 10px;">
                <div>
                    <el-button type="text" @click="()=>triggerModify()">新增表达式</el-button>
                </div>
                <el-table size="mini" :data="conditionList" border>
                    <el-table-column
                            label="字段" prop="fieldName" min-width="120px;">
                        <template slot-scope="scope">
                            <tip-content v-model="scope.row.fieldName" :overflow="1"></tip-content>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="表达式" prop="expression" min-width="120px;">
                        <template slot-scope="scope">
                            <tip-content v-model="scope.row.expression" :overflow="1"></tip-content>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="值" prop="fieldValue" min-width="120px;">
                        <template slot-scope="scope">
                            <tip-content v-model="scope.row.fieldValue" :overflow="1"></tip-content>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作" prop="fieldValue" width="66px;">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="操作" width="222" trigger="hover">
                                <div>
                                    <el-button size="mini" type="text" icon="el-icon-edit"
                                               @click="()=>triggerModify(scope.row)"> 修改
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                               @click="()=>handleDelete(scope.row)">删除
                                    </el-button>
                                </div>
                                <el-button slot="reference" type="text">操作</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            
            
            </section>
        </div>
    </div>

</template>
<script>
  
  import { fillData } from '../utils';
  
  import dialogDrag from '@/directs/dialogDrag.ts';
  import { default as FormDialog } from '@codegenarate/mydialogplus';
  import { MessageBox, Message } from 'element-ui';
  
  const rules = {
    nodeName: [{ required: true, trigger: 'blur' }],
  };
  import { alertFail, alertSuccess } from '@base/utils';
  import svgIcon from '@codegenarate/svg-icon';
  import axios from 'axios';
  import dic from '@/utils/dicContant.js';
  
  
  import * as mesBpmConditionApi from '@/apis/mesBpmCondition.api.js';
  
  
  import * as bpnmNodeApi from '@/apis/bpnmNode.api.js';
  
  export default {
    data() {
      return {
        isFold: true,
        dic,
        rules,
        visiable: true,
        formData: {
          'id': '',
          lineId: '',
          'bpmId': '',
          'sourceNodeId': '',
          'targetNodeId': '',
          'sourceNodeCode': '',
          'targetNodeCode': '',
          'sourceThirdPartId': '',
          'targetThirdPartId': '',
          'state': '',
          'remarks': '',
          'tenantType': '',
          'tenantId': '',
          'delState': '',
          'addUser': '',
          'addUserId': '',
          'addTime': '',
          'editUser': '',
          'editUserId': '',
          'lastEditTime': '',
          'serverNumber': '',
        },
        nodeDom: undefined,
        conditionList: [],
        sourceNodeData: undefined,
        targetNodeData: undefined,
      };
    },
    directives: {
      dialogDrag1: dialogDrag,
    },
    components: {
      svgIcon,
      dicSelect: () => import('@/components/dicselect.vue'),
      departSelectV: () => import('@/components/departSelectV.vue'),
      departSelect: () => import('@/components/departSelect.vue'),
      hrmUserSelect: () => import('@/components/hrmUserSelect.vue'),
      tipContent: () => import('@/components/tipcontent/index.vue'),
    },
    props: {
      node: { type: [Object] },
    },
    watch: {
      '$props.node'(datas) {
      
      },
    },
    computed: {
      title() {
        return `从【${this.sourceNodeData && this.sourceNodeData.nodeName || ''}】到【${this.targetNodeData && this.targetNodeData.nodeName || ''}】`;
      },
      
    },
    methods: {
      handleDelete(row) {
        if ((!row || !row.id) && this.ids.length > 1) {
          Message.error('禁止批量删除');
          return Promise.resolve(false);
        }
        let that = this;
        const postIds = row.id || this.ids[0];
        return MessageBox.confirm(
          '是否确认删除编号为"' + postIds + '"的数据项?',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          },
        )
          .then(function () {
            return mesBpmConditionApi.del(postIds);
          })
          .then(() => {
            that.getInfoList();
            Message.success('删除成功');
            return Promise.resolve(true);
          })
          .catch(() => {
            return Promise.resolve(false);
          });
      },
      /**
       * @description: 新增 修改 表达式
       * @params
       * @return
       */
      async triggerModify(row) {
        var self = this;
        var result = await FormDialog({
          title: '添加条件',
          width: '777px',
          data() {
            return {
              ...row,
              lineId: self.formData.lineId,
              bpmId: self.formData.bpmId,
            };
          },
          components: {
            modify: () => import('@/forms/edgeForm/conditionModify.vue'),
          },
        });
        if (result) {
          await this.getConditionList();
        }
        
      },
      async getConditionList() {
        var self = this;
        var result = await mesBpmConditionApi.getList({
          pageNum: 0,
          pageSize: 100,
          bpmId: this.formData.bpmId,
          lineId: this.formData.lineId,
        });
        this.conditionList = result && result.data || [];
      },
      
      
      triggerLeft() {
        var self = this;
        
        this.isFold = !this.isFold;
      },
      
      async getInfoList() {
        await this.getConditionList();
      },
      /**
       * @description:
       * @params _data.bpmId
       * @PARAMS _data.lineId
       *  @PARAMS _data.data
       * @return
       */
      async initByDialog(_data) {
        this.visiable = true;
        this.nodeDom = _data && _data.node;
        fillData(this.formData, {
          ..._data && _data.data,
          bpmId: _data && _data.bpmId,
          id: _data && _data.lineId||_data && _data.id,
          lineId: _data && _data.lineId||_data && _data.id,
        });
        
        var sourceNodeId = this.formData.sourceNodeId;
        var targetNodeId = this.formData.targetNodeId;
        
        if(sourceNodeId){
          var result = await bpnmNodeApi.getItem(sourceNodeId);
          this.sourceNodeData = result && result.data;
        }

        
        if(targetNodeId){
          var result2 = await bpnmNodeApi.getItem(targetNodeId);
          this.targetNodeData = result2 && result2.data;
        }

        
        
        await this.getConditionList();
        
      },
      getNode(nodeId) {
      
      },
      propmiseValidate() {
        return new Promise(resolve => {
          this.$refs['form'].validate(isyes => {
            resolve(isyes);
          });
        });
      },
      
      async submitByDialog() {
        var self = this;
        var isyes = await this.propmiseValidate();
        if (!isyes) {
          return { success: false };
        }
        var use123 = this.formData.use123;
        if (use123/*表达式*/) {
          //this.nodeDom.setLabelAt(0, use123);
          self.nodeDom.setAttrByPath('line/stroke', 'red');
        } else {
          self.nodeDom.setAttrByPath('line/stroke', '#333');
        }
        this.nodeDom.updateData(this.formData);
        alertSuccess('保存成功');
        
        return { success: true };
      },
      
    },
  };
</script>
